<template>
    <div>
        <template>
            <Table border :columns="columns1" :data="data1">
                <template slot-scope="{ row }" slot="name">
                    <strong>{{ row.name }}</strong>
                </template>
                <template slot-scope="{ row, index }" slot="action1">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="show1(index)">查看机构信息</Button>
                    <Button type="success" size="small" style="margin-right: 5px" @click="show2(index)">查看入住信息</Button>
                    <Button v-if="row.applystate === '未申请'" type="warning" size="small" style="margin-right: 5px" @click="show3(index)">申请运营补贴</Button>

                </template>
            </Table>
            <template>
                <Modal
                        v-model="modal1"
                        title="机构信息"
                        width="1000px">
                    <template>
                        <div>
                            <Table border ref="selection" :columns="columns3" :data="data3"></Table>
                        </div>
                    </template>
                </Modal>
            </template>
            <template>
                <Modal
                        v-model="modal2"
                        title="入住信息"
                        width="1000px">
                    <template>
                        <div>
                            <Table border ref="selection" :columns="columns2" :data="data2"></Table>
                        </div>
                    </template>
                </Modal>
            </template>
            <template>
                <Modal
                        v-model="modal3"
                        title="申请运营补贴"
                        width="500px"
                        @on-ok="shenqingok()"
                    >
                    <template>
                        <CellGroup>
                            <Row>
                                <Col span="6">
                                    <Cell title="当前入住人数：" />
                                </Col>
                                <Col span="18">
                                    <div style="line-height: 38px">
                                        {{num}}人
                                    </div>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6">
                                    <Cell title="申请补贴床次数：" />
                                </Col>
                                <Col span="18">
                                    <div>
                                        <Input v-model="value" placeholder="请输入床次数" style="width: 300px" />
                                    </div>
                                </Col>
                            </Row>
                        </CellGroup>
                    </template>
                </Modal>
            </template>
        </template>

    </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      xianshi: true,
      modal1: false,
      modal2: false,
      modal3: false,
      value: '',
      idindex: '',
      num: '10',
      columns1: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          minWidth: 108,
          title: '养老机构名称',
          key: 'name',
          align: 'center'
        },
        {
          minWidth: 120,
          title: '地点',
          key: 'address',
          align: 'center'
        },
        {
          minWidth: 85,
          title: '床位',
          key: 'bednum',
          align: 'center'
        },
        { minWidth: 86,
          title: '入住人数',
          key: 'peoplenum',
          align: 'center'
        },
        { minWidth: 86,
          title: '申请状态',
          key: 'applystate',
          align: 'center'
        },
        { minWidth: 86,
          title: '审批状态',
          key: 'approvaltate',
          align: 'center'
        },
        { minWidth: 86,
          title: '是否通过',
          key: 'passstate',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action1',
          width: 350,
          align: 'center'
        }
      ],
      data1: [
        {
          name: '祥顺养老院',
          address: '于洪区大兴乡孤家子小区',
          bednum: 62,
          peoplenum: '10',
          applystate: '未申请',
          approvaltate: '未审批',
          passstate: '否'

        },
        {
          name: '康居敬养中心',
          address: '东陵区姚千镇春明路36号',
          bednum: 300,
          peoplenum: '10',
          applystate: '已申请',
          approvaltate: '待审批',
          passstate: '否'
        },
        {
          name: '黎明养老院',
          address: '大东区黎明三街4号',
          bednum: 265,
          peoplenum: '10',
          applystate: '已申请',
          approvaltate: '已审批',
          passstate: '是'
        }

      ],
      columns2: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          title: '姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          align: 'center'
        },
        {
          title: '年龄',
          key: 'age',
          align: 'center'
        },
        {
          title: '入住时间',
          key: 'begtime',
          width: 140,
          align: 'center'
        },
        {
          title: '离远时间',
          key: 'endtime',
          width: 140,
          align: 'center'
        },
        {
          title: '房间号',
          key: 'roomid',
          align: 'center'
        },
        {
          title: '床号',
          key: 'bedid',
          align: 'center'
        }
        // {
        //   title: '申请',
        //   slot: 'action',
        //   width: 100,
        //   align: 'center'
        // }
      ],
      data2: [
        {
          name: '刘勇',
          sex: '男',
          age: '68',
          begtime: '2015年9月10日',
          endtime: '2019年10月1日',
          roomid: '202',
          bedid: '1'
        },
        {
          name: '唐鹏',
          sex: '男',
          age: '72',
          begtime: '2009年5月25日',
          endtime: '2017年10月1日',
          roomid: '205',
          bedid: '1'
        },
        {
          name: '吕永华',
          sex: '男',
          age: '70',
          begtime: '2015年10月19日',
          endtime: '2019年9月1日',
          roomid: '108',
          bedid: '1'
        },
        {
          name: '刘颖',
          sex: '女',
          age: '69',
          begtime: '2017年10月1日',
          endtime: '2019年10月1日',
          roomid: '201',
          bedid: '2'
        },
        {
          name: '王建功',
          sex: '男',
          age: '77',
          begtime: '2016年10月1日',
          endtime: '2019年10月1日',
          roomid: '201',
          bedid: '1'
        },
        {
          name: '马天琪',
          sex: '男',
          age: '69',
          begtime: '2017年3月13日',
          endtime: '2018年8月15日',
          roomid: '216',
          bedid: '2'
        },
        {
          name: '杨世才',
          sex: '男',
          age: '67',
          begtime: '2016年10月1日',
          endtime: '2019年10月1日',
          roomid: '216',
          bedid: '1'
        },
        {
          name: '刘芳',
          sex: '女',
          age: '74',
          begtime: '2014年6月6日',
          endtime: '2018年9月5日',
          roomid: '108',
          bedid: '2'
        },
        {
          name: '蒋志辉',
          sex: '男',
          age: '78',
          begtime: '2016年2月1日',
          endtime: '2019年11月15日',
          roomid: '103',
          bedid: '1'
        },
        {
          name: '夏玉英',
          sex: '女',
          age: '82',
          begtime: '2012年4月13日',
          endtime: '2019年12月13日',
          roomid: '103',
          bedid: '2'
        }
      ],
      columns3: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          title: '机构名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '地点',
          key: 'address',
          width: 150,
          align: 'center'
        },
        {
          title: '负责人姓名',
          key: 'principalname',
          align: 'center'
        },
        {
          title: '创办时间',
          key: 'chuangbantime',
          width: 120,
          align: 'center'
        },
        {
          title: '占地面积',
          key: 'area',
          align: 'center'
        },
        {
          title: '床位',
          key: 'bednum',
          align: 'center'
        },
        {
          title: '入住人数',
          key: 'peoplenum',
          align: 'center'
        },
        {
          title: '收费标准',
          key: 'money',
          align: 'center'
        }
      ],
      data3: [
        {
          name: '',
          addresss: '',
          principalname: '',
          chuangbantime: '',
          area: '',
          bednum: '',
          peoplenum: '',
          money: ''
        }
      ]
    }
  },
  methods: {
    show1 (index) {
      this.modal1 = true
      this.data3[0].name = this.data1[index].name
      this.data3[0].address = this.data1[index].address
      this.data3[0].bednum = this.data1[index].bednum
      this.data3[0].peoplenum = this.data1[index].peoplenum
      this.data3[0].principalname = '候玉兰'
      this.data3[0].area = '1000'
      this.data3[0].chuangbantime = '2006年5月1日'
      this.data3[0].money = '600 - 1100'
    },
    show2 (index) {
      this.modal2 = true
    },
    show3 (index) {
      this.modal3 = true
      this.idindex = index
    },
    ok () {
      // this.$Message.info('Clicked ok')
    },
    cancel () {
      // this.$Message.info('Clicked cancel')
    },
    shenqingok () {
      if (this.data1[this.idindex].applystate === '未申请') {
        this.data1[this.idindex].applystate = '已申请'
      }
      this.xianshi = false
    }
  },
  mounted () {
  }
}
</script>

<style scoped>

</style>
